<template>
  <div class="header">
    <header class="home-header" :class="{ active: headerScroll }">
      <router-link tag="span" to="/login" :class="{ active: !headerScroll }" v-if="!isLogin">登录</router-link>
      <van-icon class="userIcon" @click="$router.push('/mine')" name="manager-o" color="#fff" v-else-if="headerScroll" />
      <van-icon class="userIcon" @click="$router.push('/mine')" name="manager-o" color="#5fc6c2" v-else />
      <router-link tag="div" to="/search" class="search">
        <span>游缘景行</span>
        <i></i>
        <span>愿世间一切皆有情可寄</span>
      </router-link>
      <router-link to="/">
        <van-icon color="#fff" v-if="headerScroll" name="wap-nav" />
        <van-icon color="#5fc6c2" v-else name="wap-nav" />
      </router-link>
    </header>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 控制title颜色
      headerScroll: false,
      // 判断是否登录
      isLogin: false,
    };
  },
  mounted() {
    // 判断用户是否登录
    this.isToken();
    // 判断滚动
    window.addEventListener('scroll', this.pageScroll);
  },
  methods: {
    // 判断是否登录
    isToken() {
      if (localStorage.getItem('token')) this.isLogin = true;
      else this.isLogin = false;
    },
    // 判断滚动
    pageScroll() {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      scrollTop > 150 ? (this.headerScroll = true) : (this.headerScroll = false);
    },
  },
};
</script>
<style lang="scss">
.header {
  .home-header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 1.33333rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 1.33333rem;
    padding: 0 0.4rem;
    box-sizing: border-box;
    font-size: 0.4rem;
    color: #fff;
    z-index: 10000;

    &.active {
      background-color: #5fc6c2;
    }

    .van-icon-wap-nav {
      height: 100%;
      line-height: 1.33333rem;

      &::before {
        width: 16px;
        height: 16px;
        font-size: 19px;
      }
    }

    .search {
      display: flex;
      width: 74%;
      height: 0.53333rem;
      line-height: 0.53333rem;
      margin: 0.26667rem 0;
      padding: 0.13333rem 0;
      color: #232326;
      background: hsla(0, 0%, 100%, 0.7);
      border-radius: 0.53333rem;

      & > span:nth-child(1) {
        padding: 0 0.26667rem;
        color: #5fc6c2;
        font-size: 0.53333rem;
        font-weight: 700;
        border-right: 0.02667rem solid #666;
        line-height: 1;
      }

      & > i:nth-child(2) {
        padding: 0 0.26667rem;
        font-size: 0.45333rem;
      }

      & > span:nth-child(3) {
        font-size: 0.32rem;
        color: #666;
        line-height: 0.56rem;
      }
    }

    span {
      line-height: 1.38667rem;

      &.active {
        color: #5fc6c2;
      }
    }

    .userIcon {
      font-size: 0.53333rem;
      vertical-align: -0.08rem;
    }
  }
}
</style>
